<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
      text-decoration: none;
      outline-style: none;
      border: 0 none;
      font-size: 14px;
      font-family: '宋体';
      color:#666;
      vertical-align: middle;
    }
    html, body{
      width: 100%;
      height: 100%;
    }
    body{
      background: url('img/bg.jpg');
      background-size: cover;
      background-attachment: fixed;
    }
    .nav{
      width: 100%;
      height: 90px;
      background-color: white;
      border-bottom: 1px solid #ccc;
    }
    .w{
      width: 980px;
      height: 100%;
      margin: 0 auto;
      position: relative;
    }
    .logo{
      position: absolute;
      left: 0 ;
      top: 50%;
      transform: translateY(-50%);
    }
    .search{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid #ccc;
    }
    .search input:nth-child(1){
      width: 260px;
      height: 30px;
      padding-left: 10px;
      box-sizing: border-box;
      float: left;
    }
    .search input:nth-child(2){
      width: 60px;
      height: 30px;
      background: url('img/search.png') no-repeat center;
      background-color: skyblue;
      float: left;
    }
    .other{
      position: absolute;
      right: 0;
      top:50%;
      transform: translateY(-50%);
    }
    .other li{
      float:left;
      margin-right: 10px;
    }
    .hot{
      position: absolute;
      left: 332px;
      bottom: 0;
    }
    .hot li{
      float: left;
      padding-right: 10px;
    }
    .content{
      width: 980px;
      margin: 0 auto;
    }
    .content img{
      width: 100%;
    }
    .fixed_top{
      position: fixed;
      bottom: 50px;
      right: 10px;
      display: none;  
    }
    /* 固定类名 */
    .nav_fixed{
      height: 80px;
      position: fixed;
      top:0;
      left: 0;
    }
    .nav_fixed .hot{
      display: none;
    }
  </style>
</head>
<body>
  <div class="nav">
    <div class="w">
      <div class="logo"><a href="javascript:;"><img src="img/logo.png" alt=""></a></div>
      <div class="search">
        <input type="text" placeholder="请输入信息">
        <input type="button">
      </div>
      <div class="other">
        <ul>
          <li><a href="javascript:;">部落管理</a></li>
          <li><a href="javascript:;">部落管理</a></li>
          <li><a href="javascript:;">部落管理</a></li>
        </ul>
      </div>
      <div class="hot">
        <ul>
          <li><a href="javascript:;">趣味测试</a></li>
          <li><a href="javascript:;">趣味测试</a></li>
          <li><a href="javascript:;">趣味测试</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="content">
    <img src="img/content.png" alt="">
  </div>
  <div class="fixed_top">
    <img src="img/to_top.png" alt="">
  </div>
  <script>
    var body = document.querySelector('body');
    var nav = document.querySelector('.nav');
    var fixed_top = document.querySelector('.fixed_top');
    body.onscroll = function(){
      var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      console.log(scrollTop);
      if(scrollTop > 200){
        nav.classList.add('nav_fixed');
        fixed_top.style.display = 'block';
      }else{
       nav.classList.remove('nav_fixed');
       fixed_top.style.display = 'none';
      }
    }
    fixed_top.onclick = function(){
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
  </script>
</body>
</html>